<template>
  <div id="app">
    <v-header :seller="seller"></v-header>
    <div class="tab border-bottom">
      <div class="tab-item">
        <router-link to="/goods" class="tab-item-a">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings" class="tab-item-a">评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller" class="tab-item-a">商家</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import axios from 'axios'
import Header from './components/header/Header.vue'
export default {
  name: 'App',
  data () {
    return {
      seller: {}
    }
  },
  methods: {
    getSellerInfo () {
      axios.get('./api/data.json')
        .then(this.handleGetSellerInfo)
    },
    handleGetSellerInfo (res) {
      if (res.data) {
        this.seller = res.data.seller
      }
    }
  },
  mounted () {
    this.getSellerInfo()
  },
  components: {
    'v-header': Header
  }
}
</script>

<style lang="stylus" scoped>
  .tab
    display flex
    height 40px
    width 100%
    line-height 40px
    .tab-item
      flex 1
      text-align center
      .tab-item-a
        display block
        font-size 14px
        color rgb(77,85,93)
        &.router-link-active
          color rgb(240,20,20)
</style>
